<!--停车记录-->
<template>
  <div class="series-con">
    <template v-if="parkingList.length">
    <div class="series-con-delete" @click="handleDeleteParking(pIndex)" v-if="!disabled">删除</div>
    <div class="series-con-list">
      <div class="series-con-item">
        <div class="series-con-label">停车时间：</div>
        <div class="series-con-box time">
          <div class="time-span" @click="selectStartTime">{{parkingDetail.startTime}}</div><div class="time-text">至</div><div class="time-span" @click="selectEndTime">{{parkingDetail.endTime}}</div>
        </div>
      </div>
      <div class="series-con-item">
        <div class="series-con-label">时长/h：</div>
        <div class="series-con-box ">
          {{timeDifference}}
        </div>
      </div>
      <div class="series-con-item reason series-con-full">
        <div class="series-con-label">停车原因：</div>
        <div class="series-con-box">
          <textarea @blur="dataSave" :disabled="disabled" v-model="parkingDetail.remark" maxlength="100"></textarea>
        </div>
      </div>
    </div>
    </template>
    <template v-else>
      <div class="series-con-list">
        <div class="series-con-text" :key="index" v-for="(item,index) in parkingDetail.list">{{item}}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'parking',
  data () {
    return {
      timeDifference: ''
    };
  },

  components: {},

  props:{
    parkingDetail:{
      type: Object,
      default(){
        return {}
      }
    },
    parkingList:{
      type: Array,
      default(){
        return []
      }
    },
    pIndex:{
      type: Number,
      default: 0
    },
    disabled:{
      type: Boolean,
      default: false
    }
  },

  watch:{
    'parkingDetail.startTime'(val) {
      if(this.parkingDetail.endTime){
        this.computedTime()
      }
    },
    'parkingDetail.endTime'(val) {
      if(this.parkingDetail.startTime){
        this.computedTime()
      }
    }
  },

  computed: {},

  mounted() {
    this.$nextTick(()=>{
      this.computedTime()
    })
  },

  methods: {
    selectStartTime(){
      if(this.disabled){
        return
      }
      let that = this
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD HH:mm',
        startDate: '',
        onConfirm (value) {
          that.parkingDetail.startTime = value
          // if(that.parkingDetail.endTime){
          //   that.computedTime()
          // }
        },
        onHide(type) {
          if(type === 'cancel') {
            // that.banci = value
          }
        }
      })
    },
    computedTime(){
      if(this.parkingDetail.endTime && this.parkingDetail.startTime){
        let time = new Date(this.parkingDetail.endTime.replace(/-/g, '/')).getTime() - new Date(this.parkingDetail.startTime.replace(/-/g, '/')).getTime()
        if(time < 0 ){
          this.$vux.toast.show({ text: "结束时间不能小于开始时间", type: "warn" });
          this.parkingDetail.endTime = ''
          return
        }
        this.timeDifference = (time / 1000 / 60 / 60).toFixed(2)
        this.$emit('timeDifference',{
          data: this.timeDifference,
          value: this.pIndex
        })
      }
    },
    selectEndTime(){
      if(this.disabled){
        return
      }
      let that = this
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD HH:mm',
        startDate: '',
        onConfirm (value) {
          that.parkingDetail.endTime = value
          that.dataSave()
          // if(that.parkingDetail.startTime){
          //   that.computedTime()
          // }
        },
        onHide(type) {
          if(type === 'cancel') {
            // that.banci = value
          }
        }
      })
    },
    handleDeleteParking(){
      this.$emit('handleDeleteParkingEmit',this.pIndex)
    },
    dataSave(){
      this.$store.commit('changeProduceDataStatus')
    }
  }
}

</script>
<style lang="less" scoped>
.series-con {
  margin-top: 10px;
  background: #292a4d;
  .series-con-delete {
    padding: 10px 10px 10px 0 ;
    font-size: 14px;
    text-align: right;
    text-decoration: underline;
    color: #456de6;
    border-bottom: 1px solid #464656;
  }
}
.series-con-list {
  padding: 10px;
  .series-con-text{
    padding: 4px 0;
    font-size: 14px;
  }
  .series-con-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    .series-con-label {
      width: 110px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
    }
    .series-con-box {
      flex: 1;
      color: #ffffff;
      font-size: 14px;
      width: 96%;
      input {
        width: 100%;
        border: 0;
        color: #ffffff;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
        &:readonly {
          background: none;
          color: #ffffff;
          // -webkit-text-fill-color:#ffffff;
        }
        &.full {
          width: 100%;
        }
      }
      input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        color: #ffffff;
      }
      input::-moz-placeholder { /* Firefox 19+ */  
        color: #ffffff;
      }
      input:-ms-input-placeholder { /* IE 10+ */ 
        color: #ffffff;
      }
      input:-moz-placeholder { /* Firefox 18- */ 
        color: #ffffff;
      }
    }
  
    .series-con-full{
      flex-direction: column;
    }
  }
}
.series-con-list {
  .series-con-item {
    padding: 8px 0;
    &.reason {
      align-items: flex-start;
    }
    .series-con-label {
      width: 70px;
    }
    .series-con-box {
      &.time {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #dedede;
      }
      .time-text {
        width: 20px;
        text-align: center;
      }
      .time-span {
        flex: 1;
        height: 20px;
        padding: 0 1px;
        font-size: 13px;
      }
      textarea {
        width: 100%;
        height: 80px;
        background: #ffffff;
        border: 0;
        color: #22233f;
        font-size: 14px;
        padding: 8px;
        border-radius: 2px;
      }
    }
  }
  .series-con-full{
    flex-direction: column;
  }
}
</style>